<template>
  <span>{{time}}</span>
</template>

<script>
export default {
  name: 'TimeCountDown',
  data() {
    return {
      time: '',
      propTime: 0
    }
  },
  // created() {
  //   // this.init()
  // },
  activated() {
    this.init()
  },
  props: {
    startTime: {
      type: Number
    }
  },
  methods: {
    init() {
      if (this.startTime) {
        clearInterval(this.timer)
        this.propTime = this.startTime / 1000
        this.timer = setInterval(() => {
          if (this.propTime > 0) {
            return this.propTime--
          } else {
            this.propTime = 0
            this.$emit('handleFunc')
            console.log(123)
            clearInterval(this.timer)
          }
        }, 1000)

        this.timeDown()
      }
    },
    timeDown() {
      if (this.propTime > 0) {
        // const d = parseInt(this.propTime / (24 * 60 * 60))
        const h = parseInt(this.propTime / (60 * 60) % 24)
        const m = parseInt(this.propTime / 60 % 60)
        const s = parseInt(this.propTime % 60)
        this.time = `${h}小时${m}分${s}秒`
      } else {
        this.time = '0秒'
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  watch: {
    propTime: 'timeDown',
    startTime: {
      handler: function(n, o) {
        if (n != o) {
          this.init()
        }
      },
      immediate: true
    }
  }
}
</script>
